<template>
  <Panel title="门禁设备列表" width="380px">
    <div class="table-container">
        <div class="status">
            <div class="danger"><span></span>报警</div>
            <div class="warning"><span></span>故障</div>
            <div class="success"><span></span>正常</div>
            <div class="info"><span></span>离线</div>
        </div>
      <el-table
        :data="deviceList"
        style="width: 100%"
        class="table"
        :row-class-name="rowClass"
        header-row-class-name="table"
        header-cell-class-name="table">
        <el-table-column type="selection" width="26" />
        <el-table-column prop="name" label="名称" width="80" />
        <el-table-column prop="code" label="编号" width="74" />
        <el-table-column prop="area" label="区域" width="72" />
        <el-table-column prop="status" label="开关" width="64">
          <template #default="scope">
            <el-switch v-model="scope.row.enable" />
          </template>
        </el-table-column>
        <el-table-column prop="id" label="定位" width="60">
          <template #default="scope">
            <Icon name="map-filling" :size="18"></Icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </Panel>
</template>

<script lang="ts" setup>

function rowClass(target) {
  switch (target.row.status) {
    case "正常":
      return "row-success";
    case "报警":
      return "row-danger";
    case "故障":
      return "row-warning";
    default:
      return "row-info";
  }
}
const deviceList = ref([
  { id: "1", img: "img", name: "一楼大门", code: "A00101", area: "1楼a区", status: "正常", enable: true },
  { id: "2", img: "img", name: "一楼大门", code: "A00101", area: "1楼b区", status: "正常", enable: false },
  { id: "3", img: "img", name: "一楼大门", code: "A00101", area: "1楼c区", status: "报警", enable: true },
  { id: "4", img: "img", name: "一楼大门", code: "A00101", area: "1楼d区", status: "正常", enable: true },
  { id: "5", img: "img", name: "一楼大门", code: "A00101", area: "1楼e区", status: "故障", enable: false },
  { id: "5", img: "img", name: "一楼大门", code: "A00101", area: "1楼e区", status: "离线", enable: true },
  { id: "5", img: "img", name: "一楼大门", code: "A00101", area: "1楼e区", status: "离线", enable: false },
]);

onMounted(() => {

});
</script>
<style lang="scss" scoped>
.table-container {
  :deep(.el-table) {
    background-color: transparent;

    .cell {
      display: flex;
      align-items: center;
    }
    tr {
      position: relative;
      background-color: transparent;
    }
    th.el-table__cell {
      background-color: transparent;
      color: #fff;
    }
    td.el-table__cell {
      border-bottom: none;
      margin-bottom: 4px;
    }
    td:first-child::before {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
    }
  }
  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent;
  }
  :deep(.el-table__body) {
    border-spacing: 0px 12px;
    color: #fff;
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      display: none;
    }
  }

  :deep(.row-success) {
    background: linear-gradient(90deg, #29ec7840 2%, rgba(41, 236, 120, 0) 99%);
    & td:first-child::before {
      background-color: #29ec78;
    }
  }
  :deep(.row-warning) {
    background: linear-gradient(90deg, #fe8d3b40 2%, rgba(254, 141, 59, 0) 99%);
    & td:first-child::before {
      background-color: #fe8d3b;
    }
  }
  :deep(.row-danger) {
    background: linear-gradient(90deg, #ff000040 2%, rgba(255, 0, 0, 0) 99%);
    & td:first-child::before {
      background-color: #ff0000;
    }
  }
  :deep(.row-info) {
    background: linear-gradient(90deg, #89898940 2%, rgba(137, 137, 137, 0) 99%);
    & td:first-child::before {
      background-color: #898989;
    }
  }

  .chart {
    width: 100%;
    height: 260px;
  }
}

.status{
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin: 16px 0px;
}
.success,.warning,.danger,.info{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    span{
        display: inline-block;
        width: 12px;
        height: 12px;
    }
}
.success span{
    background-color: var(--success-color);
}

.warning span{
    background-color: var(--warning-color);
}
.danger span{
    background-color: var(--danger-color);
}
.info span{
    background-color: var(--info-color);
}

</style>
